<template>
    <div class="my-tables">
        <el-tabs type="card" v-model="compState.activeName" class="demo-tabs">
            <el-tab-pane name="first">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Grid />
                        </el-icon>&nbsp;
                        <span>医院实况</span>
                    </span>
                </template>
                <div class="input_search" style="padding: 5px">
                    <el-input v-model="compState.hopitalInputFilter" placeholder="输入医院关键字筛选" clearable
                        @input="handleSearchHospital" :prefix-icon="Search">
                    </el-input>
                </div>
                <el-table :data="compState.hospitalDataCopy" style="width: 100%" max-height="780" height="780"
                    highlight-current-row row-key="id" stripe :header-cell-style="headerCellStyle">
                    <el-table-column prop="name" label="医院" width="300" show-overflow-tooltip />
                    <el-table-column align="right">
                        <template #default="scope">
                            <el-button size="small" @click="handleHospi(scope.row)" icon="View">
                                {{ "医院监控" }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { setupMapState } from "../../../store/utils/hook"
import { GetDanBingPreVedio } from 'network/danbingVideo';
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus';
import { GetHospitalInfo } from '../../../network/hospital'
import { Search } from '@element-plus/icons-vue'

const store = useStore()
const compState = reactive({
    activeName: ref('first'),
    hopitalInputFilter: "",
    hospitalData: [],
    hospitalDataCopy: []
})
const { hospitalTreeRemoteVx } = setupMapState("HospVenuAmbuModule", ["hospitalTreeRemoteVx"])
const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
const handleSearchHospital = () => {
    // 遍历数据筛选赋值
    compState.hospitalDataCopy = compState.hospitalData.filter((item) => {
        return item.name.search(compState.hopitalInputFilter) != -1;
    });
}
const handleHospi = (row) => {
    if (row.EquipmentId != null && row.EquipmentId != "") {
        GetDanBingPreVedio({ code: row.EquipmentId })
            .then((res) => {
                // console.log("医院",res);
                window.open(res);
            })
            .catch((err) => {
                ElMessage({ message: '暂无医院监控！', type: 'warning' });
            });
    } else {
        ElMessage({ message: '暂无医院监控！', type: 'warning' });
    }
}
const headerCellStyle = () => {
    return { 'backgroundColor': 'rgba(165, 180, 203, 0.2)' }
}
onMounted(async () => {
    if (hospitalTreeRemoteVx.value.length > 0) {
        compState.hospitalData = hospitalTreeRemoteVx.value;
        compState.hospitalDataCopy = [...compState.hospitalData];
    } else {
        await GetHospitalInfo(ACVCodesVx.value).then(res => {
            // console.log(res)
            if (res && res.length != 0) {
                store.dispatch('HospVenuAmbuModule/saveHospitalAct', res);
            }
            compState.hospitalData = hospitalTreeRemoteVx.value;
            compState.hospitalDataCopy = [...compState.hospitalData];
        })
    }

})
</script>
 
<style scoped></style>